// Name:            Comment
// Description:     Defines styles for comment threads
//
// Component:       `uk-comment`
//
// Sub-objects:     `uk-comment-header`
//                  `uk-comment-avatar`
//                  `uk-comment-title`
//                  `uk-comment-meta`
//                  `uk-comment-body`
//                  `uk-comment-list`
//                  `uk-comment-primary`
//
// Markup:
//
// <!-- uk-comment -->
// <article class="uk-comment">
//     <header class="uk-comment-header">
//         <img class="uk-comment-avatar" src="avatar.svg" width="50" height="50" alt="">
//         <h4 class="uk-comment-title"></h4>
//         <div class="uk-comment-meta"></div>
//     </header>
//     <div class="uk-comment-body">
//         <p></p>
//     </div>
// </article>
//
// ========================================================================


// Variables
// ========================================================================

@comment-header-margin-bottom: 15px;

@comment-avatar-margin-right: 15px;

@comment-title-margin-top: 5px;
@comment-title-font-size: 16px;
@comment-title-line-height: 22px;

@comment-meta-margin-top: 2px;
@comment-meta-color: #999;
@comment-meta-font-size: 11px;
@comment-meta-line-height: 16px;

@comment-list-margin-top: 15px;
@comment-list-padding-left: 100px;


/* ========================================================================
   Component: Comment
 ========================================================================== */

.uk-comment {
  .hook-comment;
}


/* Sub-object `uk-comment-header`
 ========================================================================== */

.uk-comment-header {
  margin-bottom: @comment-header-margin-bottom;
  .hook-comment-header;
}

/*
 * Micro clearfix
 */

.uk-comment-header:before,
.uk-comment-header:after {
  content: " ";
  display: table;
}

.uk-comment-header:after {
  clear: both;
}


/* Sub-object `uk-comment-avatar`
 ========================================================================== */

.uk-comment-avatar {
  margin-right: @comment-avatar-margin-right;
  float: left;
  .hook-comment-avatar;
}


/* Sub-object `uk-comment-title`
 ========================================================================== */

.uk-comment-title {
  margin: @comment-title-margin-top 0 0 0;
  font-size: @comment-title-font-size;
  line-height: @comment-title-line-height;
  .hook-comment-title;
}


/* Sub-object `uk-comment-meta`
 ========================================================================== */

.uk-comment-meta {
  margin: @comment-meta-margin-top 0 0 0;
  font-size: @comment-meta-font-size;
  line-height: @comment-meta-line-height;
  color: @comment-meta-color;
  .hook-comment-meta;
}


/* Sub-object `uk-comment-body`
 ========================================================================== */

.uk-comment-body {
  .hook-comment-body;
}

/*
 * Remove margin from the last-child
 */

.uk-comment-body > :last-child {
  margin-bottom: 0;
}


/* Sub-object `uk-comment-list`
 ========================================================================== */

.uk-comment-list {
  padding: 0;
  list-style: none;
}

.uk-comment-list .uk-comment + ul {
  margin: @comment-list-margin-top 0 0 0;
  list-style: none;
}

.uk-comment-list > li:nth-child(n+2),
.uk-comment-list .uk-comment + ul > li:nth-child(n+2) {
  margin-top: @comment-list-margin-top;
}

/* Tablet and bigger */
@media (min-width: @breakpoint-medium) {

  .uk-comment-list .uk-comment + ul {
    padding-left: @comment-list-padding-left;
  }

}


/* Modifier `uk-comment-primary`
 ========================================================================== */

.uk-comment-primary {
  .hook-comment-primary;
}


// Hooks
// ========================================================================

.hook-comment-misc;

.hook-comment() {
}

.hook-comment-header() {
}

.hook-comment-avatar() {
}

.hook-comment-title() {
}

.hook-comment-meta() {
}

.hook-comment-body() {
}

.hook-comment-primary() {
}

.hook-comment-misc() {
}